<template>
	<view class="goods-view">
		<view class="group-goods" v-for="(item,index) in goods" :key="index">
			<view class="group-img">
				<image :src="item.coverPhoto || noPic"></image>
			</view>
			<view class="group-title">
				<text>{{item.productName}}</text>
			</view>
			<view class="group-desc">
				<text>{{item.prodDesc}}</text>
			</view>
			<view class="flex justify-between group-button">
				<view>
					<text class="group-price">￥{{item.ownerPrice}}</text>
					<text class="normal-price">￥{{item.vipPrice}}</text>
				</view>
				<view>
					<button class="cu-btn round bg-orange sm " @click="_toProductShare(item.productId,item.shopId)">去分享
						></button>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="share==true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">分享链接</view>
				</view>
				<view class="padding-xl">
					<view class="item">
						{{shareUrl}}
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action margin-0 flex-sub  solid-left" @tap="_cancleShare()">取消</view>
					<view class="action margin-0 flex-sub text-green solid-left" @tap="_doShare()">确定复制</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		listAffiliateProduct
	} from "../../api/affiliate/affiliateApi";
	import conf from '@/conf/config.js';
	import mapping from "../../lib/java110/java110Mapping";

	export default {
		data() {
			return {
				goods: [],
				share: false,
				shareUrl: '',
				noPic: conf.commonBaseUrl + 'h5/static/noPic.png',
				curPage: '',
				coverPhoto: '',
				prodName: ''
			}
		},
		async onLoad() {
			await this._loadGoods();
		},
		// 分享功能
		onShareAppMessage() {
			return {
				title: this.prodName,
				path: this.curPage,
				imageUrl: this.coverPhoto,
				success: (res) => {
					wx.showToast({
						title: '分享成功'
					});
				}
			};
		},
		methods: {
			async _loadGoods() {
				let param = {
					page: 1,
					row: 20
				};
				try {
					const data = await listAffiliateProduct(param);
					this.goods = data || [];
					if (this.goods && this.goods.length > 0) {
						let affiltateUser = wx.getStorageSync(mapping.AFFILIATE_USER);
						this.curPage = "/pages/affiliate/sharePage?productId=" + this.goods[0].productId +
							"&shopId=" + this.goods[0].shopId + "&auId=" + affiltateUser.auId;
						this.coverPhoto = this.goods[0].coverPhoto;
						this.prodName = this.goods[0].prodName;
					}
					console.log(JSON.stringify(this.goods))
				} catch (error) {
					console.error('获取分销商品数据出错:', error);
				}
			},

			_toProductShare: function(productId, shopId) {
				this.share = true;
				let affiltateUser = wx.getStorageSync(mapping.AFFILIATE_USER);
				console.log(JSON.stringify(affiltateUser))
				this.shareUrl = "http://mallapp.homecommunity.cn/#/pages/affiliate/sharePage?productId=" + productId +
					"&shopId=" + shopId + "&auId=" + affiltateUser.auId;
			},

			_cancleShare: function() {
				this.share = false;
			},

			_doShare: function() {
				uni.setClipboardData({
					data: this.shareUrl,
					success: () => {
						uni.showToast({
							title: '链接已复制',
							icon: 'success'
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '复制链接失败',
							icon: 'none'
						});
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.goods-view {
		padding: 20upx;
		border-radius: 10upx;

		.group-goods {
			border-radius: 20upx;
			background-color: #fff;
			padding-bottom: 15upx;
			margin-bottom: 20upx;

			.group-img {
				width: 100%;

				image {
					height: 280upx;
					width: 100%;
					border-radius: 20upx 20upx 0upx 0upx;
				}
			}

			.group-title {
				font-size: 30upx;
				margin: 15upx;
			}

			.group-desc {
				font-size: 24upx;
				margin-left: 15upx;
				margin-right: 15upx;
				color: #777;
			}

			.group-button {
				margin: 15upx;

				.group-price {
					color: #e1212b;
					font-size: 34upx;
				}

				.normal-price {
					margin-left: 10upx;
					font-size: 24upx;
					text-decoration: line-through;
				}

				.buyer-count {
					margin-left: 10upx;
					font-size: 24upx;
					color: #777;
				}
			}
		}
	}
</style>